<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			canvas {
				display: block;
			}
			
			* {
				padding: 0;
				margin: 0;
				outline: 0;
				border: 0;
				box-sizing: border-box;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			body {
				background: -webkit-linear-gradient(45deg,#FFFFFF 0%, #6fc7b5 10%, #13bdce 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
				background: linear-gradient(45deg,#FFFFFF 0%, #6fc7b5 10%, #13bdce 20%, #0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
				background-size: 600%;
				background-position: 0% 100%;
				-webkit-animation: gradient 8.5s ease-in-out infinite;
				animation: gradient 8.5s ease-in-out infinite;
				position: absolute;
				left: 0;
			}
			
			.loading {
				width: 100%;
				height: 100%;
			}
			
			.loading * {
				position: fixed;
				left: 50%;
				top: 50%;
				-webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
				transform: translate3d(-50%, -50%, 0) rotate(0deg);
			}
			
			.loading .logo {
				background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/440564/galleria-en.svg");
				background-repeat: no-repeat;
				background-position: center;
				width: 180px;
				height: 100%;
			}
			
			.loading .dots.animate .dot {
				-webkit-animation: loading-block 2.5s ease-in-out 1;
				animation: loading-block 2.5s ease-in-out 1;
			}
			
			.loading .dots.animate .dot:after {
				-webkit-animation: loading-dot 2.5s ease-in-out 1;
				animation: loading-dot 2.5s ease-in-out 1;
			}
			
			.loading .dots .dot {
				width: 300px;
				height: 300px;
			}
			
			.loading .dots .dot:after {
				content: "";
				display: inline-block;
				width: 60px;
				height: 60px;
				background-color: #fff;
				border-radius: 50%;
				position: absolute;
				-webkit-transform: scale(0.17);
				transform: scale(0.17);
			}
			
			.loading .dots .dot:nth-child(1) {
				top: 119px;
				left: -209px;
				-webkit-animation-delay: 0s;
				animation-delay: 0s;
			}
			
			.loading .dots .dot:nth-child(1):after {
				-webkit-transform-origin: top right;
				transform-origin: top right;
				top: 0;
				right: 0;
				-webkit-animation-delay: 0s;
				animation-delay: 0s;
			}
			
			.loading .dots .dot:nth-child(2) {
				top: -161px;
				left: -194px;
				-webkit-animation-delay: 0.25s;
				animation-delay: 0.25s;
			}
			
			.loading .dots .dot:nth-child(2):after {
				-webkit-transform-origin: bottom right;
				transform-origin: bottom right;
				bottom: 0;
				right: 0;
				-webkit-animation-delay: 0.25s;
				animation-delay: 0.25s;
			}
			
			.loading .dots .dot:nth-child(3) {
				top: -161px;
				left: -101px;
				-webkit-animation-delay: 0.5s;
				animation-delay: 0.5s;
			}
			
			.loading .dots .dot:nth-child(3):after {
				-webkit-transform-origin: bottom right;
				transform-origin: bottom right;
				bottom: 0;
				right: 0;
				-webkit-animation-delay: 0.5s;
				animation-delay: 0.5s;
			}
			
			.loading .dots .dot:nth-child(4) {
				top: 116px;
				left: 200px;
				-webkit-animation-delay: 0.75s;
				animation-delay: 0.75s;
			}
			
			.loading .dots .dot:nth-child(4):after {
				-webkit-transform-origin: top left;
				transform-origin: top left;
				top: 0;
				left: 0;
				-webkit-animation-delay: 0.75s;
				animation-delay: 0.75s;
			}
			
			.loading .dots .dot:nth-child(5) {
				top: -161px;
				left: 214px;
				-webkit-animation-delay: 1s;
				animation-delay: 1s;
			}
			
			.loading .dots .dot:nth-child(5):after {
				-webkit-transform-origin: bottom left;
				transform-origin: bottom left;
				bottom: 0;
				left: 0;
				-webkit-animation-delay: 1s;
				animation-delay: 1s;
			}
			
			@-webkit-keyframes loading-block {
				100% {
					-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
					transform: translate3d(-50%, -50%, 0) rotate(360deg);
				}
			}
			
			@keyframes loading-block {
				100% {
					-webkit-transform: translate3d(-50%, -50%, 0) rotate(360deg);
					transform: translate3d(-50%, -50%, 0) rotate(360deg);
				}
			}
			
			@-webkit-keyframes loading-dot {
				50% {
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}
			
			@keyframes loading-dot {
				50% {
					-webkit-transform: scale(1);
					transform: scale(1);
				}
			}
			
			@-webkit-keyframes gradient {
				50% {
					background-position: 100% 0%;
				}
			}
			
			@keyframes gradient {
				50% {
					background-position: 100% 0%;
				}
			}
		</style>

	</head>

	<body>
		<canvas id="main_canvas"></canvas>
		<canvas id="c"></canvas>
		<div class='loading'>
			<div class='logo'></div>
			<div class='dots animate'>
				<div class='dot'></div>
				<div class='dot'></div>
				<div class='dot'></div>
				<div class='dot'></div>
				<div class='dot'></div>
			</div>
		</div>
	</body>
	<script>
		(function() {
			/*进度条*/

			var canvas = document.getElementById('main_canvas');
			var ctx = canvas.getContext('2d');
			var TurnPlate = {
				R: 30,
				r: 20,
			}
			canvas.width = TurnPlate.R * 2;
			canvas.height = TurnPlate.R * 2;
			ctx.strokeStyle = 'gold';
			var angle = 0;
			var i = 0;
			ctx.fillStyle = "red";
			setInterval(function() {
				if(i == 360) {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					ctx.fillStyle == "#ff0000" ? ctx.fillStyle = "gold" : (ctx.fillStyle == "#ffd700" ? ctx.fillStyle = "blue" : ctx.fillStyle = "#ff0000");
					i = 0;
					angle = 0;
				}
				ctx.beginPath();
				ctx.arc(TurnPlate.R, TurnPlate.R, TurnPlate.R, angle, angle + (Math.PI * 2 / 360), false);
				ctx.arc(TurnPlate.R, TurnPlate.R, TurnPlate.r, angle + (Math.PI * 2 / 360), angle, true);
				angle += (Math.PI * 2 / 360);
				ctx.stroke();
				ctx.fill();
				i++;

			}, 1000 / 100);
		})();
		(function() {

			'use strict'

			var c = document.getElementById('c');
			var ctx = c.getContext('2d');
			var w = c.width = window.innerWidth;
			var h = c.height = 400;
			var cx = w / 2;
			var cy = h / 2;
			//随机盒子 含有自己的属性
			var Box = function(x, y, vx, color) {
				this.color = color;
				this.vx = vx; //为速度值
				this.x = x; //x值
				this.y = y; //y值
				this.w = 10 + Math.random() * 50; //宽度
				this.h = 5 + Math.random() * 300; //高度
			};
			Box.prototype = {
				constructor: Box,
				update: function() {
					//更新状态方法
					this.x += this.vx;
					if(this.x < -this.w / 2) {
						this.x = w + this.w / 2;
					}
				},
				render: function(ctx) {
					ctx.save();
					ctx.fillStyle = this.color;
					ctx.translate(this.x, this.y);
					ctx.fillRect(-this.w / 2, -this.h, this.w, this.h);
					ctx.restore();
				}
			};
			/*背景分为3层 每层矩形为50个 box*/
			var ctr = 50;
			var boxes = [];
			var boxes2 = [];
			var boxes3 = [];
			var box;
			var speed = -5;

			for(var i = 0; i < ctr; i++) {
				box = new Box(Math.random() * w, h, speed * 0.5, '#e5e5e5'); //暂时替换为 最里面一层
				boxes.push(box);
			}
			for(var i = 0; i < ctr; i++) {
				box = new Box(Math.random() * w, h, speed * 0.8, '#cccccc'); //#cccccc
				boxes2.push(box);
			}
			for(var i = 0; i < ctr; i++) {
				box = new Box(Math.random() * w, h, speed, '#999999');
				boxes3.push(box);
			}
			//动画 循环
			requestAnimationFrame(function loop() {
				//调用自己实现循环
				requestAnimationFrame(loop);
				ctx.clearRect(0, 0, w, h);
				ctx.globalAlpha = 0.9;
				for(var i = 0, len = boxes.length; i < len; i++) {
					box = boxes[i];
					box.update();
					box.render(ctx);
				}
				for(var i = 0, len = boxes2.length; i < len; i++) {
					box = boxes2[i];
					box.update();
					box.render(ctx);
				}
				for(var i = 0, len = boxes3.length; i < len; i++) {
					box = boxes3[i];
					box.update();
					box.render(ctx);
				}
			});

		})();

		setInterval(function() {
			document.querySelectorAll(".dots")[0].classList.remove('animate');
			setTimeout(function() {
				document.querySelectorAll(".dots")[0].classList.add('animate');
			}, 200);
		}, 3750);
	</script>

</html>